/**
 * ComponentType 表示组件类型，可以是函数组件也可以是类组件
 *
 * Record<K, V>
 */

import { Component, createElement, ComponentType } from "react";
import classNames from "classnames";
import "./global.css";

// import Home from "./components/Home";
// import About from "./components/About";
// import Contact from "./components/Contact";
// const components = {
//   Home,
//   About,
//   Contact,
// };

const modules = import.meta.glob<true, string, ComponentType>(
  "./components/*.tsx",
  {
    eager: true,
    import: "default",
  }
);
const components: Record<string, ComponentType> = {};
for (const key in modules) {
  const arr = key.split("/");
  const name = arr[arr.length - 1].split(".")[0];
  components[name] = modules[key];
}
// console.log("modules", modules);

interface IProps {}

interface IState {
  cur: string;
}

export default class App extends Component<IProps, IState> {
  state: Readonly<IState> = {
    cur: "Home",
  };

  change = (name: string) => {
    this.setState({
      cur: name,
    });
  };

  render() {
    const { cur } = this.state;

    return (
      <div>
        <h1>Tabs 选项卡切换</h1>

        <button
          // className={cur === "Home" ? "button active" : "button"}
          className={classNames("button", { active: cur === "Home" })}
          onClick={() => this.change("Home")}
        >
          Home
        </button>
        <button
          // className={cur === "About" ? "button active" : "button"}
          className={classNames("button", { active: cur === "About" })}
          onClick={() => this.change("About")}
        >
          About
        </button>
        <button
          // className={cur === "Contact" ? "button active" : "button"}
          className={classNames("button", { active: cur === "Contact" })}
          onClick={() => this.change("Contact")}
        >
          Contact
        </button>

        <hr />
        {/* {cur === "Home" && <Home />}
        {cur === "About" && <About />}
        {cur === "Contact" && <Contact />} */}

        {createElement(components[cur])}
      </div>
    );
  }
}
